import React from 'react'
import moment from 'moment'
import { Modal, Table, Button } from 'antd'

const List = ({
                roles,
                showRolesModal,
                rolesModalVisible,
                loading,
                ...tableProps
              }) => {

  const guid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }
  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      width: '50%'
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: '50%'
    },
  ]
  console.info(loading)
  return (
    <div>
      <Modal
        title="用户角色"
        visible={rolesModalVisible}
        pagination={false}
        onCancel={() => showRolesModal(false)}
        footer={[
          <Button key="primary" onClick={() => showRolesModal(false)}>确定</Button>
        ]}
      >
        <Table loading={loading.global} dataSource={roles} columns={columns} rowKey={guid} pagination={false}/>
      </Modal>
    </div>
  )
}

export default List
